import { useRef, type ReactNode } from "react";
import useEvent from "@react-hook/event";
import type { Checkbox } from "./mdui";

const Checker = (properties: {
  children: ReactNode;
  checked: boolean;
  call: () => void;
}) => {
  const checkReference = useRef<Checkbox>(null);
  useEvent(checkReference, "change", properties.call);

  return (
    <div>
      <mdui-checkbox
        unchecked-icon="radio_button_unchecked"
        checked-icon="check_circle"
        ref={checkReference}
        checked={properties.checked ? true : void 0}
      >
        {properties.children}
      </mdui-checkbox>
    </div>
  );
};

export default Checker;
